<template>
	<view class="handleProblemContainer">
		<u-navbar
			ref="navbar"	
			back-icon-name="arrow-leftward" 
			title="问题处理"
			:background="{
				background: '#5C77FF',
			}"
			title-color="#ffffff"
			back-icon-color="#ffffff">
		</u-navbar>
		<view class="content">
			<view class="container">
				<view class="list">
					<view class="title">项目：</view>
					<view class="right">{{dataInfo.projectTitle}}</view>
				</view>
				<view class="list">
					<view class="title">详情：</view>
					<view class="right">{{dataInfo.remark}}</view>
				</view>
				<view class="list">
					<view class="title">类型：</view>
					<u-tag :text="dataInfo.type || ''" size="mini"></u-tag>
				</view>
				<view class="list">
					<view class="title">提交人：</view>
					<view class="right">{{dataInfo.creater}}</view>
				</view>
				<view class="list">
					<view class="title">建议：</view>
					<view class="right">{{dataInfo.suggest}}</view>
				</view>
				<view class="list">
					<view class="title">截止时间：</view>
					<view class="right">{{dataInfo.flowTime}}</view>
				</view>
				<view class="list" v-if="dataInfo.files && dataInfo.files[0]">
					<view class="title">文件：</view>
					<view class="file">{{dataInfo.files[0].name}}</view>
					<view class="downLoad" @click="downLoadFile">下载</view>
				</view>
				<view class="handleContainer">
					<view class='title'>处理结果：</view>
					<u-input 
						v-model='result' 
						:disabled="isDisabled"
						type='textarea' 
						:custom-style="{
							backgroundColor:'#fff',
							borderRadius: '10px',
							padding:'10px 15px',
							marginBottom: '10px'
						}">
					</u-input>
				</view>
				<view>
					<u-button 
						:ripple="true" :hair-line="false" 
						:custom-style="{
							backgroundColor: '#5c77ff',
							color:'#ffffff',
							margin:'20px 0',
							fontSize:'18px',
							padding:'5px 0',
							boxSizing:'content-box',
						}"
						v-if="!isDisabled"
						@click="submit">
						提交
					</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
//问题处理页面
import {getProblemInfoById} from "@/common/Api.js";
export default {
	name:'HandleProjectWt',
	data() {
		return {
			id:'',
			dataInfo:{},
			result:'',
			isDisabled:false,
			creater:uni.getStorageSync('username'),  //当前登录用户的用户名
		}
	},
	onLoad(data){
		this.id = data.id;  //获取页面传过来的参数
	},
	mounted(){
		if(this.creater){
			this.getProblemInfo();
		}
	},
	methods: {
		getProblemInfo(){
			uni.showLoading({
				title: '加载中',
			});
			getProblemInfoById(
				this.id,
			).then(res=>{
				this.dataInfo = res.data.data;
				if(this.dataInfo.result){
					this.result = this.dataInfo.result;
					this.isDisabled = true;
				}
			}).finally(()=>{
				uni.hideLoading();
			});
		},
		downLoadFile(){
			uni.showLoading({
				title: '正在下载'
			});
			uni.downloadFile({
				url: this.$my_global.url + this.dataInfo.files[0].url, 
				header:{
					ssid:uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.statusCode === 200) {
						wx.openDocument({
							filePath: res.tempFilePath,
							success: function(res) {
								
							}
			
						})
						this.$refs.uToast.show({
							title: '下载成功',
							type: 'success',
						})
					}
				},
				complete:() =>{
					uni.hideLoading()
				}
			});
		},
		submit(){
			if(!this.result){
				this.$refs.uToast.show({
					title: '请填写处理结果',
					type: 'error',
				})
				return
			}
			uni.showLoading({
				title: '正在提交',
			});
			this.$ajax({
				url:`/wx/quest/${this.id}`,
				method:'PUT',
				data:{
					result:this.result
				},
				success:(res) =>{
					if(res.data.state == 401){
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
						})
						this.result = ''
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success',
						})
						this.getProblemInfo()
					}
				},
				complete:() =>{
					uni.hideLoading()
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.handleProblemContainer{
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	.content{
		width: 100vw;
		padding: 10px 10px 0 10px;
		.container{
			padding: 10px;
			width: 100%;
			background-color:rgba(232, 232, 232, 0.5);
			border-radius: 10px;
			.list{
				margin-bottom: 10px;
				align-items: flex-start;
				display: flex;
				.title{
					text-align: right;
					width: 70px;
					font-weight: bold;
				}
				.right{
					width: calc(100% - 70px);
				}
				.file{
					width: calc(100% - 110px);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.downLoad{
					width: 34px;
					color: #8294FD;
					border-bottom: 1px solid #8294FD;
				}
			}
		}
		.handleContainer{
			border-top: 1px solid #f3f3f3;
			padding-top: 20px;
			margin-top: 20px;
			.title{
				font-weight: bold;
				margin-bottom: 10px;
			}
		}
	}
}
</style>
